import React from 'react';
import { createRoot } from 'react-dom/client';
import Footer from './Footer';
import StreamContainer from './StreamContainer';
import './styles/screen_stream.less';
import { Provider } from 'react-redux';
import store from '@/store';
import Canvas from './Canvas';
import { IBusinessName } from '@/modules/interface';

interface CustomerStreamProps {
	stopMark?: (clientId: string, businessName: IBusinessName) => Promise<void>;
	clientId?: string;
	videoId: any;
	width: number;
	height: number;
	closeView?: () => void;
}

const createCustomerStreamContainer = (props: CustomerStreamProps) => {
	const { stopMark, clientId, videoId } = props;
	const parentContainer = document.createElement('div');
	const container = document.createElement('div');
	parentContainer.setAttribute('class', 'widget-screen-share-parent-contianer');
	parentContainer.id = 'widget-screen-share-parent-contianer';
	container.setAttribute('class', 'widget-customer-view-mark-contianer');
	container.id = 'widget-screen-share-contianer';
	document.body.appendChild(parentContainer);
	parentContainer.appendChild(container);
	createRoot(container).render(
		<Provider store={store}>
			<StreamContainer
				videoId={videoId}
				closeView={() => {
					removeCustomerViewMarkContainer();
					if (stopMark) {
						stopMark(clientId!, IBusinessName.CUSTOMER_VIEW_MARK);
					}
				}}
			/>
			<Footer clientId={clientId} videoId={videoId}></Footer>
			<Canvas clientId={clientId}></Canvas>
		</Provider>
	);
};

const removeCustomerViewMarkContainer = () => {
	console.log('removeCustomerViewMarkContainer');
	const container = document.getElementById('widget-screen-share-parent-contianer');
	container && document.body.removeChild(container);
};

type StyleProps = React.CSSProperties;
const CustomerViewMarkDialog = (props: CustomerStreamProps) => {
	const { closeView, clientId, videoId, width, height } = props;
	return (
		<div className="widget-screen-share-parent-contianer" id="widget-screen-share-parent-contianer">
			<div className="widget-customer-view-mark-contianer" id="widget-customer-view-mark-contianer" style={{ '--width': `${width}px`, '--height': `${height}px` } as StyleProps}>
				<StreamContainer videoId={videoId} closeView={closeView}></StreamContainer>
				<Footer clientId={clientId} videoId={videoId} width={width} height={height}></Footer>
				<Canvas clientId={clientId} width={width} height={height}></Canvas>
			</div>
		</div>
	);
};

export { createCustomerStreamContainer, removeCustomerViewMarkContainer };

export default CustomerViewMarkDialog;
